<template>
  <div>
    <BackButton></BackButton>
  </div>

  <el-tabs v-model="activeTab" :tab-position="tabPosition" style="margin-left: 10px;" class="demo-tabs">
    <el-tab-pane label="主要信息" name="matterInfo">
      <matter-info :row-data="rowData"></matter-info>
    </el-tab-pane>

    <el-tab-pane label="落实情况" name="implementationStatus">
      <implementation-status :row-data="rowData"></implementation-status>
    </el-tab-pane>

    <el-tab-pane label="催办记录" name="reminderRecord">
      <reminder-record :row-data="rowData"></reminder-record>
    </el-tab-pane>

    <el-tab-pane label="工作报告" name="eventReport">
      <event-report :row-data="rowData"></event-report>
    </el-tab-pane>
  </el-tabs>
</template>
<!--进入标签页-->
<script lang="ts" setup>
import {ref, onMounted, onBeforeUnmount} from 'vue';
import {useRouter} from 'vue-router';
import matterInfo from "../WorkImplementation/matter/matterInfo.vue";
import implementationStatus from "../WorkImplementation/matter/implementationStatus.vue";
import reminderRecord from "../WorkImplementation/matter/reminderRecord.vue";
import eventReport from "../WorkImplementation/matter/eventReport.vue";


// 定义 props
const props = defineProps({
  rowData: Object
});

const tabPosition = ref<'top' | 'right' | 'bottom' | 'left'>('top');
const activeTab = ref('matterInfo'); // 设置默认的tab为 createMatter

const router = useRouter();


// 监听浏览器的返回事件
const handlePopState = (event) => {

  var routerUrl = props.rowData.router
  if (!routerUrl) {
    routerUrl = '/workImplementation';
  }
  router.push(routerUrl);
};

onMounted(() => {
  window.addEventListener('popstate', handlePopState);
});

onBeforeUnmount(() => {
  // 示例：在组件销毁前执行路由跳转
  // router.push('/WorkImplementation/index');
});
</script>

<style>
</style>
